<template>
    <div>
        <h2>图片浏览</h2>
        <div class="image-box">
            <div v-for="item in listData" :key="item.t_nav_content_pk" class="image-item">
                <h3>{{ item.title }}</h3>
                <img :src="item.image_path">
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/util/request";



export default {
    data() {
        return {
            listData: []
        }
    },
    // 组件生命周期函数：组件创建时调用一次，页面参数可以在此加载
    created() {

        console.log("request = ",request);

        request({
            url: "/navContent/queryList",
            // POST请求体的参数，axios默认以json方式传输数据
            data: { pageSize: 10, type1: 6 },
            method: "post"
            // 处理请求成功
        }).then(res => {
            // res.data：获取响应正文，如果是json格式，自动封装成对象
            // 判断逻辑是否成功
            if (res.data.code > 0) {
                // 获取数据
                this.listData = res.data.data;
            }
            // 处理失败
        },() => {
            console.log("错误")
        });
    }
}
</script>

<style scoped lang="scss">
.image-box {
    display: flex;
    flex-wrap: wrap;

    .image-item {
        width: 25%;

        img {
            width: 100%;
        }
    }
}
</style>